
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, Input, Card, Form } from 'antd';
import { messErr } from '@/utils/message';
import styles from './UpdateField.less';

class AddNewField extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      fieldName: '',
    };
  }

  open = (next = () => {}) => {
    this.setState({ visible: true }, next);
  };

  close = (next = () => {}) => {
    this.setState({
      visible: false,
      fieldName: '',
    }, next);
  };
  // 点击 ok
  handleOK = () => {
    const {
      handleSubmit,
      updatingFieldName,
      updatingFieldArea,
    } = this.props;
    if(updatingFieldName && ('' + updatingFieldArea)) {
      this.close(handleSubmit);
    }
  };

  render() {
    const {
      handleInput,
      updatingFieldName,
      updatingFieldArea,
    } = this.props;

    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    };

    return (
      <Modal
        title="编辑土地"
        visible={this.state.visible}
        onOk={this.handleOK}
        onCancel={() => this.close()}
      >
        <Card bordered={false}>
          <Form.Item {...formItemLayout} label="土地名">
            <Input
              value={updatingFieldName}
              onChange={e => handleInput('updatingFieldName', e.target.value)}
              size="small"
              maxLength={50}
            />
          </Form.Item>
          <Form.Item {...formItemLayout} label="土地面积">
            <Input
              value={updatingFieldArea}
              onChange={e => handleInput('updatingFieldArea', e.target.value)}
              size="small"
              maxLength={10}
            />
          </Form.Item>
        </Card>
      </Modal>
    );
  }
}

AddNewField.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
};

AddNewField.defaultProps = {

};

export default AddNewField;
